<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../include/taglib.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="../../include/inhead.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta name="keywords" content="E爱车 洗车 到店洗车" />
<meta name="description" content="E爱车" />
<link rel="shortcut icon" href="${ctx}/static/imges/favicon.ico" />
<title>到店洗车</title>
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/slideNav.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/autoinn/washCar.css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=zV5nfPiCQxp1pBfTRyB3j4qO&v=2.0"></script>
<link type="text/css" rel="stylesheet" href="${ctx}/static/css/autoinn/xc/footer.css">
<link type="text/css" rel="stylesheet" href="${ctx}/static/css/autoinn/xc/store_list.css">

<style type="text/css">
body,html,#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}

#golist {
	display: none;
}

@media ( max-device-width : 780px) {
	#golist {
		display: block !important;
	}
}
.container {
			padding-left: 0px;
			padding-right: 0px;
		}
.footer_location{
padding-left: 0px;
			padding-right: 0px;
}
</style>
		<style type="text/css">
		body {
			background-color: #f0efed;
		}
		.container {
			padding-left: 0px;
			padding-right: 0px;
		}
		.row {
			margin-left: 0px;
			margin-right: 0px;
		}
		.list-group-item:first-child {
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
		}
		.list-group-item:last-child {
			border-bottom-right-radius: 0px;
			border-bottom-left-radius: 0px;
		}
		.active a {
			color: #EF8A55;
		}
		a:hover {
			color: #919191;
			text-decoration: none;
		}
		.list-group-item:first-child {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
		}
		.list-group-item:last-child {
			border-bottom-right-radius: 4px;
			border-bottom-left-radius: 4px;
		}
	</style>
</head>
<body>
	
	<div id="wrap">
	<div class="container">
			<div
			class="orange-orange-a row pf text-center f14 border-1 bdc-e6e6e6 bgc-f8f8f8 pt-5 pb-5 z99 w h45 line-height-35 pr"
			style="left: 0; top: 0;">
			<div class="col-xs-4 line-height-35 text-left pl-15 pr-0 pt-0">
				<a class="go-back f15 pa z99 pointer co8" style="left: 15px;" href="javascript:history.back(-1)"> <i
					class="fa f20 fa-angle-left pr-3"></i>返回
				</a>
			</div>
			<div class="col-xs-4 pr-0 pl-0 text-center">门店位置</div>
			<div class="col-xs-4 line-height-35 text-right"></div>
		</div>
		</div>
		
		<div id="allmap" style="height:96%"></div>
	</div>
	<input type="hidden" id="lng" name="lng" value="${lng }" />
	<input type="hidden" id="lat" name="lat" value="${lat }" />
	<input  type="hidden" id="dlng" name="dlng" value="${dlng }"/>
	<input type="hidden" id="dlat" name="dlat" value="${dlat}"/> 
	<form class="footer_location">
		<span id="m_location"><i></i></span>
	</form>
</body>
</html>
<script type="text/javascript">


	getLocationByGps();
	
	// 百度地图API功能
	var map = new BMap.Map("allmap"); // 创建Map实例
	//动态设置起始
	map.centerAndZoom(new BMap.Point(106.2464, 38.479872), 11); // 初始化地图,设置中心点坐标和地图级别。
    

	
	var driving = new BMap.DrivingRoute(map, {
		renderOptions : {
			map : map,
			autoViewport : true
		}
	});
	
	var p1 = new BMap.Point($("#lng").val(),$("#lat").val());//导航开始地址
	var p2 = new BMap.Point($("#dlng").val(),$("#dlat").val());//导航目标地址

	driving.search(p1, p2);
	

	//点击重新定位
	$("#btnresh").click(function(){
		getLocationByGps();
	});
	//定位的方法
	function getLocationByGps() {
		//页面加载时初始化用户的坐标，如果没有坐标用浏览器定位
		var geolocation = new BMap.Geolocation();
		$("#m_location").html("<i></i>正在定位中...");
		geolocation.getCurrentPosition(function(r) {
			if (this.getStatus() == BMAP_STATUS_SUCCESS) {
				var myGeo = new BMap.Geocoder();
				myGeo.getLocation(r.point, function(result) {
					if (result) {
						var addComp = result.addressComponents;
						var latlngcity = addComp.city;
						 $("#m_location").html("<i></i>" + result.address); 
						//获取数据
						getDataByCity(latlngcity, r.point.lng, r.point.lat);
					} else {
						$("#m_location").html("<i></i>");
					}
				});
			} else {
				//从后台获取经纬度，如果有经纬度那么进入地图，如果没有经纬度。进入城市切换页面
				$("#m_location").html("<i></i>打开GPS可定位");
			}

		}, {
			enableHighAccuracy : true
		})
	}
</script>
